<!-- swiper组件的讲解 -->
<template>
  <swiper :options="swiperOption">
    <swiper-slide v-for="(item, index) in slides" :key="index" class="swiper-slide">
      Slide {{ item }}
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';

export default {
  data () {
    return {
      slides: [1, 2, 3, 4, 5, 6],
      swiperOption: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true, // 分页器可以点选ßßßß
        },
        loop: true, // 图片循环
      },
    };
  },

  components: {
    swiper,
    swiperSlide
  },

  computed: {},

  mounted: {},

  methods: {}
}

</script>
<style scoped>
  .swiper-slide {
    height: 4rem;
    text-align: center;
    padding-top: 3rem;
    border-bottom: 1px solid #ccc;
  }
</style>
